<template>
	<view class="content">
		<!-- 顶部搜索 -->
		<view class="content_top">
			<view class="content_top_bar"></view>
			<view class="content_top_title">简单模玩</view>
			<view class="flex_center">
				<view class="title_ipt">
					<image :src="z_imgPath+'search.png'"></image>
					<input type="text" placeholder="请输入关键字" placeholder-style="color:rgba(2555,255,255,0.6)"
						confirm-type="search" v-model="keyword" @confirm="show='',loadData(1)" />
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" class="valbox" @init="mescrollInit" :down="downOption" @down="downCallback"
			@up="upCallback">
			<!-- 轮播 -->
			<view style="position: relative;">
				<swiper class="content_swiper" :autoplay="true" :indicator-dots="true" :circular="true">
					<swiper-item v-for="(v,i) in advert" :key='i'>
						<image class="yh_bg" :src="'https://hdyfs.languowangluo.cn'+v.imgurl"></image>
					</swiper-item>
				</swiper>
				<!-- <image :src="z_imgPath+'xian.png'" class="xianStyle"></image>
				<image :src="z_imgPath+'mysy.png'" class="mysyStyle"></image> -->
			</view>
			<!-- 公告 -->
			<view class="content_gonggao" v-if="aa && notice_list && notice_list.length>0">
				<lff-barrage ref="lffBarrage"></lff-barrage>
			</view>
			<!-- 类型筛选 -->
			<view class="qiehuan">
				<view @click="getlist(v.id)" v-for="(v,i) in arr" :key="i" :class="show==v.id?'xzs':'wzs'">
					{{v.title}}
					<!-- <image :src="show==v.show?z_imgPath+v.sel:z_imgPath+v.img" :style="show==v.show?'width:160rpx;height:47rpx;':'width:102rpx;height:26rpx;'"></image> -->
				</view>
			</view>
		<!-- 卡片数据 -->
			<view class="content_con">
				<view v-for="(item,index) in listdata" :key="index" class="content_con_item" @click="todetails(item)"
					:style="'background: url('+ z_imgPath + 'chouka_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<view class="item_img">
						<image :src="item.imgurl" mode="aspectFill"></image>
					</view>
					<view class="item_title">
						<view class="hang1">{{item.title}}</view>
						<view>￥<text>{{item.show_price}}</text></view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<tab-bar :index="2"></tab-bar>
	</view>
</template>

<script>
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	export default {
		components: {
			lffBarrage
		},
		data() {
			return {
				z_imgPath: this.$z_img1 + 'chouka/',
				arr:'',
				// arr: ['新品推荐', '一番赏', '积分赏', '无限赏', '擂台赏'],
				show:0,
				keyword: '',
				listdata: [],
				downOption: {
					auto: false
				},
				advert: [], //轮播图
				notice_list: [], // 弹幕
				erweima: '', // 福利群
				yushou_rili: '', // 预售日历
				jump_appid: '', // 跳转的小程序id
				aa: false,
			}
		},

		onUnload() {
			this.aa = false

		},
		onHide() {
			clearInterval(this.timer);
			this.aa = false
			let pages = getCurrentPages()
			uni.setStorageSync('page', this.$mp.page.route)
		},
		onLoad(v) {
			this.getnews();
			this.getCate();
		},
		onShow() {
			let that = this;
			this.aa = true
			setTimeout(() => {
				that.colrdo()
			}, 500)
		},

		onShareAppMessage() {
			let that = this;
			return {
				title: "快来加入简单模玩~",
				imageUrl: that.advert[0].imgurl,
				path: "/pages/shouye/index?pid=" + uni.getStorageSync('userinfo').ID
			};
		},
		methods: {
			colrdo() { //插入一条弹幕
				let that = this;
				let a = 0;
				that.timer = setInterval(function() {
					that.$refs.lffBarrage.add({
						item: that.notice_list[a].content,
						// title: that.notice_list[a].title,
						// color: that.notice_list[a].color,
						headimg: that.notice_list[a].headimg
					});
					if (a < that.notice_list.length - 1) {
						a++;
					} else {
						a = 0
					}
				}, 5000)
			},
			getnews() {
				let that = this;
				that.req({
					url: 'card_index',
					success(res) {
						if (res.status == 1) {
							that.advert = res.data.advert;
							that.notice_list = res.data.bullet_chat
						}
					}
				})
			},
			getCate(){
				let that = this;
				that.req({
					url: 'card_category_list',
					success(res) {
						if (res.status == 1) {
							that.arr=res.data
						}
					}
				})
			},
			/*下拉刷新的回调 */
			downCallback() {
				// this.mescroll.resetUpScroll()
				this.loadData(1)
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				this.loadData(page.num);
			},
			loadData(pageNo) {
				// 模拟接口
				let that = this;
				that.req({
					url: 'card_goods_list',
					data: {
						page: pageNo,
						type:that.show
					},
					success: function(res) {
						that.mescroll.endByPage(res.data.data.length, res.data.data.last_page);
						if (pageNo == 1) {
							that.listdata = res.data.data;
						} else {
							that.listdata = that.listdata.concat(res.data.data);
						}
						console.log(that.listdata)
					}
				})
			},
			todetails(e) {
				uni.navigateTo({
					url: 'cardDetail?goods_id=' + e.id
				})
			},
			getlist(v) {
				this.show = v;
				this.loadData(1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	//顶部
	.content{
		width: 100vw;
		box-sizing: border-box;
		position: relative;
		background-attachment: fixed;
		position: relative;
		background: #222222;
		color: #fff;
		&_top{
			width: 750rpx;
			height: 230rpx;
			padding: 30rpx;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			z-index: 15;
			&_bar {
				width: 100%;
				height: var(--status-bar-height);
			}
			&_title {
				height: 69rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
			.title_ipt{
				display: flex;
				align-items: center;
				margin: 20rpx auto;
				border-radius: 30rpx;
				padding-left: 30rpx;
				width: 620rpx;
				height: 60rpx;
				background: rgba(255, 255, 255, .2);
				border-radius: 10rpx;
				box-sizing: border-box;
				>image {
					width: 33rpx;
					height: 33rpx;
				}
				>input {
					width: 90%;
					height: 60rpx;
					box-sizing: border-box;
					border-radius: 105rpx;
					font-size: 28rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.6);
					padding-left: 20rpx;
				}
			}
		}
		&_swiper {
			width: 750rpx;
			height: 660rpx;
			margin: 0rpx auto;
			.yh_bg {
				width: 750rpx;
				height: 660rpx;
			}
		}
		&_gonggao {
			width: 750rpx;
			height: 300rpx;
			border-radius: 39rpx;
			margin: 0rpx auto;
			overflow: hidden;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			position: absolute;
			top: 330rpx;
			z-index: 16;
			pointer-events: none;
		}
		.qiehuan {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			width: 690rpx;
			margin: 35rpx auto;
			box-sizing: border-box;
			>view{
				margin-right: 20rpx;
			}
			.wzs {
				font-size: 32rpx;
				color: rgba(255, 255, 255, 0.6);
			}
			
			.xzs {
				font-size: 34rpx;
				color: #fff;
			}
		}
		&_con{
			margin:0 30rpx;
			&_item{
				width: 690rpx;
				height: 402rpx;
				padding-top:32rpx;
				box-sizing: border-box;
				margin-top: 30rpx;
				.item_img{
					margin-left: 13rpx;
					image{
						width: 664rpx;
						height: 310rpx;
					}
				}
				.item_title{
					margin: 0 20rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #FEFF00;
					text{
						font-size: 32rpx;
					}
				}
			}
		}
		swiper {
			width: 100%;
			display: flex;
			align-items: center;
			pointer-events: auto;
		}
		.xianStyle{
			width:750rpx;
			height:104rpx;
			display: block;
			position: absolute;
			left: 0;
			bottom:0
		}
		.mysyStyle{
			width: 213rpx;
			height: 129rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom:0;
			margin: 0 auto;
		}
	}
</style>